<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cencat SaaS - 配置管理</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#40A9FF',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          }
        }
      }
    }
  </script>
  
  <style>
    body { 
      font-family: 'Inter', system-ui, sans-serif; 
      overflow-x: hidden;
    }
    html { scroll-behavior: smooth; }
    
    .config-tab { 
      transition: all 0.3s ease; 
      border: 1px solid transparent;
    }
    .config-tab.active { 
      background: linear-gradient(135deg, #165DFF 0%, #40A9FF 100%); 
      color: white; 
      border-color: #165DFF;
      box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
    }
    .config-tab:not(.active):hover {
      background: rgba(22, 93, 255, 0.05);
      border-color: rgba(22, 93, 255, 0.3);
    }
    
    .config-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .config-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideIn {
      from { transform: translateX(-10px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes toastSlideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    .animate-fade-in { animation: fadeIn 0.3s ease-out; }
    .animate-slide-in { animation: slideIn 0.3s ease-out; }
    .animate-toast { animation: toastSlideIn 0.3s ease-out; }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .config-tab {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
      }
      #config-content {
        grid-template-columns: 1fr;
      }
    }
    
    /* 输入框和选择框样式 */
    input, select {
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    input:focus, select:focus {
      border-color: #165DFF;
      box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
      outline: none;
    }
    
    /* 按钮样式 */
    button {
      transition: all 0.3s ease;
    }
    button:hover {
      transform: translateY(-1px);
    }
    
    /* 侧边栏响应式 */
    @media (max-width: 768px) {
      #sidebar {
        width: 280px;
      }
      .md\\:ml-64 {
        margin-left: 0;
      }
    }
  </style>
</head>

<body class="bg-light-1">
  <div class="flex h-screen">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-md fixed left-0 top-0 z-30 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <div class="p-4 border-b border-light-2 flex items-center space-x-3">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-cubes text-white text-xl"></i>
        </div>
        <div>
          <h1 class="text-lg font-bold text-primary">Cencat SaaS</h1>
          <p class="text-xs text-dark-2">多租户管理平台</p>
        </div>
      </div>
      
      <nav class="p-3">
        <ul class="space-y-1">
          <li><a href="dashboard.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1"><i class="fa fa-dashboard w-5 h-5 mr-3"></i>仪表盘</a></li>
          <li><a href="tenants.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1"><i class="fa fa-building-o w-5 h-5 mr-3"></i>租户管理</a></li>
          <li><a href="resources.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1"><i class="fa fa-server w-5 h-5 mr-3"></i>资源监控</a></li>
          <li><a href="users.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1"><i class="fa fa-users w-5 h-5 mr-3"></i>用户管理</a></li>
          <li><a href="notifications.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1"><i class="fa fa-bell-o w-5 h-5 mr-3"></i>通知中心</a></li>
          <li><a href="configurations.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg bg-primary/10 text-primary"><i class="fa fa-wrench w-5 h-5 mr-3"></i>配置管理</a></li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 md:ml-64">
      <header class="bg-white shadow-sm sticky top-0 z-20">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="toggle-sidebar" class="mr-4 text-dark-2 hover:text-primary md:hidden">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索配置..." class="pl-10 pr-4 py-2 rounded-lg bg-light-1 text-sm w-64">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
            </div>
          </div>
        </div>
      </header>

      <main class="p-6">
        <div class="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h2 class="text-2xl font-bold text-dark">配置管理</h2>
            <p class="text-dark-2 mt-1">管理系统各项配置和第三方服务集成</p>
          </div>
          <div class="flex space-x-3">
            <button class="bg-light-1 text-dark hover:bg-light-2 text-sm px-4 py-2 rounded-lg">
              <i class="fa fa-refresh mr-2"></i>刷新配置
            </button>
            <button id="save-all-config-btn" class="bg-primary text-white text-sm px-4 py-2 rounded-lg hover:bg-primary/90">
              <i class="fa fa-save mr-2"></i>保存所有配置
            </button>
          </div>
        </div>

        <!-- 配置分类导航 -->
        <div class="bg-white rounded-xl shadow p-4 mb-6">
          <div class="flex overflow-x-auto space-x-2 pb-2">
            <button class="config-tab active px-4 py-2 rounded-lg text-sm font-medium" data-tab="email">邮件配置</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="sms">短信配置</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="work-wechat">企业微信</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="dingtalk">钉钉配置</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="storage">文件存储</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="ai">AI接口</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="map">地图服务</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="payment">支付配置</button>
            <button class="config-tab px-4 py-2 rounded-lg text-sm font-medium" data-tab="custom">自定义配置</button>
          </div>
        </div>

        <!-- 配置内容区域 -->
        <div id="config-content" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- 配置内容将通过JavaScript动态加载 -->
        </div>
      </main>
    </div>
  </div>

  <script>
    // 配置数据
    const configData = {
      email: {
        title: "邮件服务配置",
        icon: "fa-envelope-o",
        status: "已启用",
        description: "Spring Boot Mail 3.3.3集成，支持HTML模板和发送失败重试",
        fields: [
          { label: "SMTP服务器", type: "text", value: "smtp.qq.com", placeholder: "smtp.服务器地址.com" },
          { label: "端口号", type: "number", value: "587", placeholder: "587/465" },
          { label: "发件邮箱", type: "email", value: "noreply@cencat.com", placeholder: "发件人邮箱地址" },
          { label: "授权密码", type: "password", value: "********", placeholder: "邮箱授权密码" },
          { label: "邮件模板路径", type: "text", value: "/templates/email", placeholder: "邮件模板存放路径" }
        ],
        checkboxes: [
          { label: "启用SSL加密", checked: true },
          { label: "失败重试(3次)", checked: true }
        ],
        buttons: ["测试连接", "保存配置"]
      },
      sms: {
        title: "短信服务配置",
        icon: "fa-commenting-o",
        status: "待审核",
        description: "阿里云短信SDK 2.2.24，支持短信签名/模板审核",
        fields: [
          { label: "AccessKey ID", type: "text", value: "LTAI5t**********", placeholder: "阿里云AccessKey ID" },
          { label: "AccessKey Secret", type: "password", value: "********", placeholder: "阿里云AccessKey Secret" },
          { label: "短信签名", type: "text", value: "Cencat SaaS", placeholder: "短信签名名称" },
          { label: "验证码模板", type: "text", value: "SMS_123456789", placeholder: "验证码短信模板ID" },
          { label: "通知模板", type: "text", value: "SMS_987654321", placeholder: "通知短信模板ID" }
        ],
        checkboxes: [
          { label: "启用短信服务", checked: true }
        ],
        buttons: ["发送测试", "保存配置", "申请审核"]
      },
      'work-wechat': {
        title: "企业微信配置",
        icon: "fa-wechat",
        status: "已启用",
        description: "企业微信SDK 4.5.0，支持应用内消息和工作通知",
        fields: [
          { label: "企业ID", type: "text", value: "ww1234567890", placeholder: "企业微信CorpID" },
          { label: "应用Secret", type: "password", value: "********", placeholder: "应用Secret" },
          { label: "应用AgentId", type: "text", value: "1000002", placeholder: "应用AgentId" },
          { label: "消息模板ID", type: "text", value: "模板消息ID", placeholder: "模板消息ID" },
          { label: "群机器人Key", type: "text", value: "机器人Webhook Key", placeholder: "群机器人Webhook Key" }
        ],
        buttons: ["测试连接", "保存配置"]
      },
      dingtalk: {
        title: "钉钉配置",
        icon: "fa-comments-o",
        status: "未配置",
        description: "钉钉开放平台SDK，支持群消息和工作通知",
        fields: [
          { label: "AppKey", type: "text", value: "", placeholder: "钉钉应用AppKey" },
          { label: "AppSecret", type: "password", value: "", placeholder: "钉钉应用AppSecret" },
          { label: "AgentId", type: "text", value: "", placeholder: "应用AgentId" },
          { label: "机器人Webhook", type: "text", value: "", placeholder: "群机器人Webhook地址" },
          { label: "加签密钥", type: "text", value: "", placeholder: "机器人加签密钥" }
        ],
        buttons: ["测试连接", "保存配置"]
      },
      storage: {
        title: "文件存储配置",
        icon: "fa-cloud-upload",
        status: "已启用",
        description: "云存储服务配置，支持本地、阿里云OSS、腾讯云COS",
        fields: [
          { label: "存储类型", type: "select", value: "aliyun-oss", options: ["local", "aliyun-oss", "tencent-cos", "qiniu"] },
          { label: "AccessKey", type: "text", value: "LTAI5t**********", placeholder: "云存储AccessKey" },
          { label: "SecretKey", type: "password", value: "********", placeholder: "云存储SecretKey" },
          { label: "Bucket名称", type: "text", value: "cencat-saas", placeholder: "存储桶名称" },
          { label: "访问域名", type: "text", value: "https://oss.cencat.com", placeholder: "访问域名" }
        ],
        buttons: ["测试连接", "保存配置"]
      },
      ai: {
        title: "AI接口配置",
        icon: "fa-robot",
        status: "已启用",
        description: "AI服务接口配置，支持OpenAI、百度文心、讯飞星火",
        fields: [
          { label: "AI服务商", type: "select", value: "openai", options: ["openai", "baidu", "xunfei", "tencent"] },
          { label: "API Key", type: "password", value: "********", placeholder: "AI服务API Key" },
          { label: "API Secret", type: "password", value: "********", placeholder: "AI服务API Secret" },
          { label: "API端点", type: "text", value: "https://api.openai.com/v1", placeholder: "API服务地址" },
          { label: "模型名称", type: "text", value: "gpt-4", placeholder: "AI模型名称" }
        ],
        buttons: ["测试连接", "保存配置"]
      },
      map: {
        title: "地图服务配置",
        icon: "fa-map-marker",
        status: "已启用",
        description: "百度地图API服务，支持地理编码和位置服务",
        fields: [
          { label: "地图服务商", type: "select", value: "baidu", options: ["baidu", "gaode", "tencent"] },
          { label: "API Key", type: "text", value: "百度地图API Key", placeholder: "地图服务API Key" },
          { label: "安全密钥", type: "password", value: "********", placeholder: "地图服务安全密钥" },
          { label: "服务域名", type: "text", value: "https://api.map.baidu.com", placeholder: "地图API域名" }
        ],
        buttons: ["测试服务", "保存配置"]
      },
      payment: {
        title: "支付配置",
        icon: "fa-credit-card",
        status: "已启用",
        description: "支付平台SDK配置，支持微信支付、支付宝",
        fields: [
          { label: "支付平台", type: "select", value: "wechat", options: ["wechat", "alipay", "unionpay"] },
          { label: "商户号", type: "text", value: "1234567890", placeholder: "支付平台商户号" },
          { label: "API密钥", type: "password", value: "********", placeholder: "支付平台API密钥" },
          { label: "证书路径", type: "text", value: "/cert/payment", placeholder: "支付证书存放路径" },
          { label: "回调地址", type: "text", value: "https://api.cencat.com/payment/callback", placeholder: "支付回调地址" }
        ],
        buttons: ["测试支付", "保存配置"]
      },
      custom: {
        title: "自定义配置",
        icon: "fa-cogs",
        status: "可配置",
        description: "自定义业务配置，支持JSON格式配置扩展",
        fields: [
          { label: "配置名称", type: "text", value: "", placeholder: "配置项名称" },
          { label: "配置键名", type: "text", value: "", placeholder: "配置键名(key)" },
          { label: "配置值", type: "text", value: "", placeholder: "配置值(value)" },
          { label: "配置类型", type: "select", value: "string", options: ["string", "number", "boolean", "json"] },
          { label: "配置描述", type: "text", value: "", placeholder: "配置项描述" }
        ],
        buttons: ["添加配置", "保存所有"]
      }
    };

    // 切换配置标签
    document.querySelectorAll('.config-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.config-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        const tabType = this.dataset.tab;
        loadConfigContent(tabType);
      });
    });

    // 加载配置内容
    function loadConfigContent(tabType) {
      const configContent = document.getElementById('config-content');
      const config = configData[tabType];
      
      if (!config) {
        configContent.innerHTML = '<div class="col-span-2 text-center py-8 text-dark-2">配置内容加载中...</div>';
        return;
      }

      let html = `
        <div class="bg-white rounded-xl shadow p-5">
          <div class="flex items-center justify-between mb-4">
            <div>
              <h3 class="font-semibold text-lg flex items-center">
                <i class="fa ${config.icon} text-primary mr-2"></i>
                ${config.title}
              </h3>
              <p class="text-sm text-dark-2 mt-1">${config.description}</p>
            </div>
            <span class="text-xs bg-success/10 text-success px-2 py-1 rounded-full">${config.status}</span>
          </div>
          
          <div class="space-y-4">
      `;

      // 添加字段
      config.fields.forEach(field => {
        if (field.type === 'select') {
          html += `
            <div>
              <label class="block text-sm font-medium text-dark-2 mb-2">${field.label}</label>
              <select class="w-full px-3 py-2 border border-light-2 rounded-lg bg-white">
                ${field.options.map(opt => 
                  `<option value="${opt}" ${opt === field.value ? 'selected' : ''}>${opt}</option>`
                ).join('')}
              </select>
            </div>
          `;
        } else {
          html += `
            <div>
              <label class="block text-sm font-medium text-dark-2 mb-2">${field.label}</label>
              <input type="${field.type}" class="w-full px-3 py-2 border border-light-2 rounded-lg" 
                     value="${field.value}" placeholder="${field.placeholder || ''}">
            </div>
          `;
        }
      });

      // 添加复选框
      if (config.checkboxes) {
        html += '<div class="flex items-center justify-between">';
        config.checkboxes.forEach(checkbox => {
          html += `
            <label class="inline-flex items-center">
              <input type="checkbox" class="rounded border-light-2 text-primary" ${checkbox.checked ? 'checked' : ''}>
              <span class="ml-2 text-sm text-dark-2">${checkbox.label}</span>
            </label>
          `;
        });
        html += '</div>';
      }

      // 添加按钮
      html += `
            <div class="flex space-x-3 pt-4">
      `;
      
      config.buttons.forEach(button => {
        const buttonClass = button.includes('保存') || button.includes('添加') ? 
          'bg-success text-white hover:bg-success/90' : 
          'bg-primary text-white hover:bg-primary/90';
        
        html += `
              <button class="px-4 py-2 rounded-lg text-sm transition-all duration-300 ${buttonClass}">
                ${button}
              </button>
        `;
      });

      html += `
            </div>
          </div>
        </div>
      `;

      configContent.innerHTML = html;
      
      // 添加按钮事件监听
      setTimeout(() => {
        document.querySelectorAll('button').forEach(btn => {
          btn.addEventListener('click', function() {
            const buttonText = this.textContent.trim();
            handleConfigAction(tabType, buttonText);
          });
        });
      }, 100);
    }

    // 处理配置操作
    function handleConfigAction(tabType, action) {
      const config = configData[tabType];
      console.log(`执行操作: ${action} - ${config.title}`);
      
      // 模拟操作反馈
      const messages = {
        '测试连接': '正在测试连接...',
        '保存配置': '配置保存成功！',
        '发送测试': '测试短信已发送',
        '申请审核': '审核申请已提交',
        '测试服务': '服务测试完成',
        '测试支付': '支付测试成功',
        '添加配置': '配置项已添加',
        '保存所有': '所有配置已保存'
      };
      
      if (messages[action]) {
        showToast(messages[action], 'success');
      }
    }

    // 显示提示消息
    function showToast(message, type = 'info') {
      const toast = document.createElement('div');
      toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white z-50 animate-slide-in ${
        type === 'success' ? 'bg-success' : 
        type === 'error' ? 'bg-danger' : 'bg-primary'
      }`;
      toast.textContent = message;
      
      document.body.appendChild(toast);
      
      setTimeout(() => {
        toast.remove();
      }, 3000);
    }

    // 初始加载邮件配置
    loadConfigContent('email');

    // 侧边栏切换
    document.getElementById('toggle-sidebar').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('-translate-x-full');
    });

    // 保存所有配置功能
    document.getElementById('save-all-config-btn').addEventListener('click', function() {
      const configs = {};
      Object.keys(configData).forEach(key => {
        const config = configData[key];
        configs[key] = {
          title: config.title,
          status: config.status,
          fields: config.fields.map(field => ({
            label: field.label,
            value: field.value,
            type: field.type
          }))
        };
      });
      
      // 模拟保存操作
      showToast('所有配置已成功保存！', 'success');
      console.log('保存的配置数据:', configs);
    });

    // 搜索功能
    const searchInput = document.querySelector('input[placeholder="搜索配置..."]');
    searchInput.addEventListener('input', function(e) {
      const searchTerm = e.target.value.toLowerCase();
      const tabs = document.querySelectorAll('.config-tab');
      
      tabs.forEach(tab => {
        const tabText = tab.textContent.toLowerCase();
        if (tabText.includes(searchTerm)) {
          tab.style.display = 'inline-block';
        } else {
          tab.style.display = 'none';
        }
      });
    });

    // 配置状态管理
    function updateConfigStatus(tabType, newStatus) {
      if (configData[tabType]) {
        configData[tabType].status = newStatus;
        loadConfigContent(tabType);
      }
    }

    // 模拟配置测试功能
    function testConfigConnection(tabType) {
      const config = configData[tabType];
      const statuses = ['已启用', '测试中', '连接失败', '已启用'];
      let currentStatus = 0;
      
      updateConfigStatus(tabType, statuses[currentStatus]);
      
      const interval = setInterval(() => {
        currentStatus++;
        if (currentStatus < statuses.length) {
          updateConfigStatus(tabType, statuses[currentStatus]);
        } else {
          clearInterval(interval);
          showToast(`${config.title}测试完成`, 'success');
        }
      }, 1000);
    }

    // 增强的配置操作处理
    function handleConfigAction(tabType, action) {
      const config = configData[tabType];
      
      switch(action) {
        case '测试连接':
        case '测试服务':
        case '测试支付':
          testConfigConnection(tabType);
          break;
          
        case '保存配置':
          showToast(`${config.title}配置保存成功！`, 'success');
          break;
          
        case '发送测试':
          showToast('测试短信已发送到指定号码', 'success');
          break;
          
        case '申请审核':
          showToast('审核申请已提交，请等待管理员审批', 'info');
          updateConfigStatus(tabType, '审核中');
          break;
          
        case '添加配置':
          showToast('自定义配置项已添加', 'success');
          break;
          
        case '保存所有':
          showToast('所有自定义配置已保存', 'success');
          break;
          
        default:
          showToast(`执行操作: ${action}`, 'info');
      }
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
      // 添加键盘快捷键
      document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 's') {
          e.preventDefault();
          document.getElementById('save-all-config-btn').click();
        }
      });
      
      // 添加配置统计信息
      const enabledConfigs = Object.values(configData).filter(config => 
        config.status === '已启用'
      ).length;
      
      const totalConfigs = Object.keys(configData).length;
      
      console.log(`配置统计: ${enabledConfigs}/${totalConfigs} 个配置已启用`);
    });
  </script>
</body>
</html>